<template>
    <div>
        <div class="search h100 flex-v-center">
            <div class="input flex-center">
                <i class="icon-search mar-r10 color-ccc"></i>
                <input 
                    v-model="keyword" 
                    class="flex-1" 
                    type="text" 
                    confirm-type="search" 
                    placeholder="关键词" 
                    @confirm="onRefresh" 
                    placeholder-class="placeholder" >
                <i @click="clearKeyword" v-if="keyword" class="icon-close-circular"></i>
            </div>
            
            <div class="cancel mar-l20 pad-lr20 flex-center" @click="onRefresh">
                <span class="fs26">搜索</span>
            </div>
        </div>
        <div class="list">
            <div class="item" v-for="(item, index) in list" :key="index">
                <div class="avator">
                    <image :src="item.mapUserImg || ( item.mapSex == '01' ? man : women)" mode="" />
                </div>
                <div class="info flex-1">
                    <p>{{item.mapUserName}}</p>
                    <span>{{item.mapAddress}}</span>
                    <em>{{item.mapMibile || ''}}</em>
                </div>
                <div class="flex-column">
                    <div class="address flex-center flex-column" @click="editItem('open', item)">
                        <i class="icon-bianji"></i>
                        <!-- <span>编辑</span> -->
                    </div>
                    <div class="h20"></div>
                    <div class="address flex-center flex-column" @click="editItem('delete', item)">
                        <i class="icon-delete3"></i>
                        <!-- <span>删除</span> -->
                    </div>
                </div>
            </div>
            <pub-list-end :loading="scroll.loading" :max="scroll.max" :noData="scroll.noData"></pub-list-end>
        </div>


        <div class="add_new btn" @click="editItem('open')">新增</div>

        <pub-lo-popup ref="editLocation" title="编辑/新增" showCancel @confirm="editItem('confirm')">
            <div class="location_detail">
                <div class="cell">
                    <div class="cell_item">
                        <span>头像</span>
                        <div class="value">
                            <div class="mar-l20 pad10">
                                <pub-upload-img 
                                    width="100rpx"
                                    height="100rpx"
                                    upDes=""
                                    v-model="actDetail.mapUserImg" 
                                    class="whfull"></pub-upload-img>
                            </div>
                        </div>
                    </div>
                    <div class="cell_item">
                        <span>名称</span>
                        <div class="value">
                            <input v-model="actDetail.mapUserName" type="text" placeholder="输入名称" placeholder-class="placeholder">
                        </div>
                    </div>
                    <div class="cell_item">
                        <span>性别</span>
                        <div class="value">
                            <label class="flex-v-center mar-r30" @click="actDetail.mapSex = '01'">
                                <radio style="zoom:0.8" :checked="actDetail.mapSex == '01'" />
                                男
                            </label>
                            <label class="flex-v-center" @click="actDetail.mapSex = '00'">
                                <radio style="zoom:0.8" :checked="actDetail.mapSex == '00'" />
                                女
                            </label>
                        </div>
                    </div>
                    <div class="cell_item">
                        <span>电话</span>
                        <div class="value">
                            <input v-model="actDetail.mapMibile" type="text" placeholder="输入电话" placeholder-class="placeholder">
                        </div>
                    </div>
                    <div class="cell_item" @click="chooseLocation">
                        <span>位置</span>
                        <div class="value">
                            <p v-if="actDetail.mapLat">{{actDetail.mapLat + ',' + actDetail.mapLon}}</p>
                            <span v-else class="placeholder">请选择位置</span>
                        </div>
                    </div>
                    <div class="cell_item">
                        <span>地址</span>
                        <div class="value">
                            <textarea v-model="actDetail.mapAddress" placeholder="输入详细地址" placeholder-class="placeholder"></textarea>
                        </div>
                    </div>
                    <div class="cell_item">
                        <span>口号</span>
                        <div class="value">
                            <input v-model="actDetail.mapRemark" type="text" placeholder="输入口号" placeholder-class="placeholder">
                        </div>
                    </div>
                </div>
            </div>
        </pub-lo-popup>
    </div>
</template>

<script>
import { editMapUser } from '@/request/sys'
import { getMapUsers } from '@/request/relationship'
import man from '@/static/images/man.webp'
import women from '@/static/images/women.webp'
const ITEM = {
    id: '',
    mapUserImg: '',
    mapUserName: '', //名称
    mapMibile: '', //电话
    mapRemark: '', //口号
    mapLon: '',
    mapLat: '',
    mapAddress: '', //地址
    mapSex: '01' , // 00女，01男
}
export default {
    data() {
        return {
            man, women, 
            keyword: '',
            actDetail: {
                ...ITEM
            },
            list: [],
            scroll: {
                page: 1,
                size: 30,
                loading: false,
                max: false,
                noData: false,
            },
        }
    },
    onLoad() {
        this.onRefresh()
    },
    onReachBottom() {
        this.onInfinite()
    },
    methods: {
        getList(complete) {
            getMapUsers({
                keyWord: this.keyword,
                pageIndex: this.scroll.page,
                pageSize: this.scroll.size,
            }, { complete }).then(res => {
                this.list = this.scroll.page == 1 ? res.data.list : this.list.concat(res.data.list)
                this.scroll.max = this.list.length >= res.data.total
                this.scroll.noData = res.data.total == 0
            })
        },
        clearKeyword() {
            this.keyword = '' 
            this.onRefresh()
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.scroll.loading = true
            this.scroll.max = false
            this.scroll.noData = false
            this.scroll.page = 1
            this.list = []
            this.getList(() => {
                this.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.scroll.loading || this.scroll.max) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.getList(() => {
                this.scroll.loading = false
            })
        },

        editItem(type, item) {
            if(type == 'open') {
                if(item) {
                    this.actDetail = { ...item }
                } else {
                    this.actDetail = { ...ITEM }
                }
                this.$refs.editLocation.open()
            } else if(type == 'close') {
                this.$refs.editLocation.close()
            } else if(type == 'delete') {
                this.$interact.modal({
                    title: '提示',
                    content: '是否删除？',
                    showCancel: true
                }).then(action => {
                    if(action.confirm) {
                        editMapUser({
                            id: item.id,
                            delStatus: '01'
                        }).then(res => {
                            this.$interact.toast(res.msg)
                            this.onRefresh()
                        })
                    }
                })
            } else if(type == 'confirm') {
                if(!this.actDetail.mapLat) return this.$interact.toast('请选择位置')
                if(!this.actDetail.mapUserName) return this.$interact.toast('请输入名称')
                if(!this.actDetail.mapAddress) return this.$interact.toast('请输入地址')
                editMapUser({
                    id: this.actDetail.id || void 0,
                    mapUserImg: this.actDetail.mapUserImg,
                    mapUserName: this.actDetail.mapUserName, //名称
                    mapMibile: this.actDetail.mapMibile, //电话
                    mapRemark: this.actDetail.mapRemark, //口号
                    mapLon: this.actDetail.mapLon,
                    mapLat: this.actDetail.mapLat,
                    mapAddress: this.actDetail.mapAddress, //地址
                    mapSex: this.actDetail.mapSex, 
                }).then(res => {
                    this.$interact.toast(res.msg)
                    this.$refs.editLocation.close()
                    this.onRefresh()
                })

            }
        },

        chooseLocation() {
            uni.chooseLocation({
                success: res => {
                    this.actDetail.mapLat = res.latitude
                    this.actDetail.mapLon = res.longitude
                    if(!this.actDetail.mapAddress) {
                        this.actDetail.mapAddress = res.address
                    }
                }
            });
        },
    }

}
</script>

<style lang="less" scoped>
.search{
    background: #fff;
    padding: 0 30rpx;
    margin-bottom: 10rpx;
    height: 130rpx;
    position: sticky;
    top: 0;
    z-index: 10;
    .input{
        flex: 1;
        border-radius: 10rpx;
        height: 70rpx;
        background: #eee;
        padding-left: 20rpx;
        .icon-close-circular{
            width: 70rpx;
            height: 70rpx;
            .align(center);
        }
    }
    .cancel{
        width: 100rpx;
        height: 70rpx;
        border-radius: 10rpx;
        border: 1px solid #ddd;
    }
}
.list{
    width: 100%;
    padding-bottom: 200rpx;
    .item{
        width: 100%;
        // height: 140rpx;
        border-bottom: 1px solid #ddd;
        display: flex;
        align-items: center;
        padding: 20rpx 30rpx;
        .avator{
            width: 130rpx;
            height: 130rpx;
            flex-shrink: 0;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .info{
            height: 130rpx;
            padding: 0 20rpx;
            display: flex;
            flex-direction: column;
            p{
                font-weight: bold;
            }
            span{
                font-size: 26rpx;
                color: #999;
                flex: 1;
            }
            em{
                font-size: 24rpx;
                color: #666;
            }
        }
        .address{
            flex-shrink: 0;
            i{
                font-size: 38rpx;
                font-weight: bold;
            }
            .icon-bianji{
                color: #325bdf;
            }
            .icon-delete3{
                color: red;
            }
            span{
                font-size: 24rpx;
            }   
        }
    }
}
.add_new {
    padding: 10rpx 20rpx;
    background: @mainColor;
    color: #fff;
    border-radius: 50rpx;
    .align(center);
    width: 660rpx;
    height: 80rpx;
    position: fixed;
    bottom: 20rpx;
    left: 45rpx;
}
.location_detail{
    background: #fff;
    // border-radius: 20rpx;
    padding-bottom: 20rpx;
    .cell{
        font-size: 32rpx;
        .cell_item{
            width: 100%;
            min-height: 100rpx;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            >span{
                width: 120rpx;
                flex-shrink: 0;
            }
            .value{
                flex: 1;
                display: flex;
                justify-content: flex-end;
                input{
                    width: 100%;
                    height: 100rpx;
                    text-align: right;
                }

                textarea{
                    text-align: right;
                    padding: 10rpx;
                    width: 100%;
                    height: 150rpx;
                }
            }
        }
    }
    

}
</style>